<template>
  <div v-if="(($route.query.rentType==2 || $route.query.rentType==4)) || ((form.rentType ==2 || form.rentType ==4))">
    <!-- 买受人信息 -->
    <div class="card-wrap flex-column justify-end card-padding">
      <el-form v-if="form.immunityAuditType == 1 || $route.query.immunityAuditType == 1" :model="form" ref="vendee" label-width="140px" :rules="rules" :label-position="type =='detail'?'right':'top'" :disabled="type=='detail'">
        <div class="card-title-wrap">
          <span>买受人信息</span>
          <span></span>
        </div>
        <div :style="{marginLeft: (type == 'detail'?'':'50px')}" style="display: flex;justify-content:space-between;align-items: center;flex-wrap: wrap;width: 80%;">
          <div style="min-width: 370px;">
            <el-form-item label="买受人:" prop="supplementEmptor.buyerId">
              <el-select v-model="form.supplementEmptor.buyerId" filterable clearable style="width: 100%;" @change="changeVendee">
                <template v-for="dict in vendeeList">
                  <el-option :label="dict.vendeeName" :value="dict.vendeeId" :key="dict.vendeeId"></el-option>
                </template>
              </el-select>
            </el-form-item>
          </div>
          <div v-if="form.supplementEmptor.emptorType ==1 || form.supplementEmptor.emptorType ==2" style="min-width: 370px;">
            <el-form-item label="类型:">
              <el-input disabled v-model="form.supplementEmptor.buyerTypeStr" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="form.supplementEmptor.emptorType ==2" style="min-width: 370px;">
            <el-form-item label="统一社会信用代码:">
              <el-input disabled v-model="form.supplementEmptor.creditCode" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="form.supplementEmptor.emptorType ==1" style="min-width: 370px;">
            <el-form-item label="身份证号码/护照号码:">
              <el-input disabled v-model="form.supplementEmptor.idCardNo" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="form.supplementEmptor.emptorType ==2" style="min-width: 370px;">
            <el-form-item label="法定代表人/负责人:">
              <el-input disabled v-model="form.supplementEmptor.corp" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="form.supplementEmptor.emptorType ==2" style="min-width: 370px;">
            <el-form-item label="通讯地址:">
              <el-input disabled v-model="form.supplementEmptor.contactAddr" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="form.supplementEmptor.emptorType ==2" style="min-width: 370px;">
            <el-form-item label="联系人:">
              <el-input disabled v-model="form.supplementEmptor.contactPerson" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="form.supplementEmptor.emptorType ==1" style="min-width: 370px;">
            <el-form-item label="通讯地址:">
              <el-input disabled v-model="form.supplementEmptor.contactAddr" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="form.supplementEmptor.emptorType ==1" style="min-width: 370px;">
            <el-form-item label="联系电话:">
              <el-input disabled v-model="form.supplementEmptor.contactMobile" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="form.supplementEmptor.emptorType ==2" style="min-width: 370px;">
            <el-form-item label="联系电话:">
              <el-input disabled v-model="form.supplementEmptor.contactMobile" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="form.supplementEmptor.emptorType ==2" style="min-width: 370px;">
            <el-form-item label="电子邮箱:">
              <el-input disabled v-model="form.supplementEmptor.email" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="form.supplementEmptor.emptorType ==2" style="min-width: 370px;">
            <el-form-item label="传真:">
              <el-input disabled v-model="form.supplementEmptor.fax" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div style="min-width: 370px;" v-if="form.supplementEmptor.emptorType == 1 || form.supplementEmptor.emptorType == 2">
            <el-form-item label="附件上传:">
              <ImageCommon :up-type="2" info="选择附件" :limit="8" :disabled="true" v-model="form.supplementEmptor.accessory"></ImageCommon>
            </el-form-item>
          </div>
        </div>
      </el-form>

      <el-form v-if="form.immunityAuditType == 2 || $route.query.immunityAuditType == 2" :model="formDetail" label-width="150px" disabled>
        <div class="card-title-wrap">
          <span>买受人信息</span>
          <span></span>
        </div>
        <div style="margin-left:10px;display: flex;justify-content:space-between;align-items: center;flex-wrap: wrap;width: 80%;">
          <div style="min-width: 370px;">
            <el-form-item label="买受人:">
              <el-input disabled v-model="formDetail.vendeeName" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="formDetail.customerTypeCode ==1 || formDetail.customerTypeCode ==2" style="min-width: 370px;">
            <el-form-item label="类型:">
              <span>{{ formDetail.customerTypeCode==1?'个人':'企业' }}</span>
            </el-form-item>
          </div>
          <div v-if="formDetail.customerTypeCode ==2" style="min-width: 370px;">
            <el-form-item label="统一社会信用代码:">
              <el-input disabled v-model="formDetail.vendeeCode" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="formDetail.customerTypeCode ==1" style="min-width: 370px;">
            <el-form-item label="身份证号码/护照号码:">
              <el-input disabled v-model="formDetail.idCard" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="formDetail.customerTypeCode ==2" style="min-width: 370px;">
            <el-form-item label="法定代表人/负责人:">
              <el-input disabled v-model="formDetail.vendeeResponsibleName" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="formDetail.customerTypeCode ==2" style="min-width: 370px;">
            <el-form-item label="通讯地址:">
              <el-input disabled v-model="formDetail.vendeeAddress" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="formDetail.customerTypeCode ==2" style="min-width: 370px;">
            <el-form-item label="联系人:">
              <el-input disabled v-model="formDetail.vendeePerson" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="formDetail.customerTypeCode ==1" style="min-width: 370px;">
            <el-form-item label="通讯地址:">
              <el-input disabled v-model="formDetail.vendeeAddress" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="formDetail.customerTypeCode ==1" style="min-width: 370px;">
            <el-form-item label="联系电话:">
              <el-input disabled v-model="formDetail.vendeePhone" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="formDetail.customerTypeCode ==2" style="min-width: 370px;">
            <el-form-item label="联系电话:">
              <el-input disabled v-model="formDetail.vendeePhone" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="formDetail.customerTypeCode ==2" style="min-width: 370px;">
            <el-form-item label="电子邮箱:">
              <el-input disabled v-model="formDetail.vendeeMail" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div v-if="formDetail.customerTypeCode ==2" style="min-width: 370px;">
            <el-form-item label="传真:">
              <el-input disabled v-model="formDetail.vendeeFax" style="width: 100%;"></el-input>
            </el-form-item>
          </div>
          <div style="min-width: 370px;" v-if="formDetail.customerTypeCode == 1 || formDetail.customerTypeCode == 2">
            <el-form-item label="附件上传:">
              <ImageCommon :up-type="2" info="选择附件" :limit="8" :disabled="true" v-model="formDetail.annexOss"></ImageCommon>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
  <script>
import { customerCorrelationVendee } from "@/api/vehicleOrder";
import { getCreditReviewData } from "@/api/vehicleOrder";
export default {
  name: "vendee",
  dicts: ["order_emptor_type"],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    form: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    type() {
      let status;
      switch (this.state) {
        case "write":
          status = "edit";
          break;
        case "disabled":
          status = "detail";
          break;
        case "readonly":
          status = "detail";
          break;
        case "detail":
          status = "detail";
          break;
        case "edit":
          status = "edit";
        case "add":
          status = "add";
          break;
      }
      return status;
    },
  },
  data() {
    return {
      formDetail: {},
      vendeeList: [],
      rules: {
        supplementEmptor: {
          buyerId: [
            { required: true, message: "请选择买受人", trigger: "change" },
          ],
        },
      },
    };
  },
  created() {
    this.customerCorrelationVendee();
    this.getCreditReviewData(this.$route.query.applicationNo || this.value.applicationNo)
  },
  methods: {
    async getCreditReviewData(applicationNo) {
      try {
        let res = await getCreditReviewData(applicationNo)
        console.log(res.data, '000000000000000000');
        this.formDetail = res.data.vendee
      } catch (error) {

      }
    },
    changeVendee() {
      this.form.supplementEmptor.buyerName = this.vendeeList
        .map((item) => {
          if (item.vendeeId == this.form.supplementEmptor.buyerId) {
            return item.vendeeName;
          }
        })
        .filter((i) => i)[0];
      this.form.supplementEmptor.emptorType = this.vendeeList
        .map((item) => {
          if (item.vendeeId == this.form.supplementEmptor.buyerId) {
            return item.customerTypeCode;
          }
        })
        .filter((i) => i)[0];
      let Obj = this.vendeeList
        .map((item) => {
          if (item.vendeeId == this.form.supplementEmptor.buyerId) {
            return item;
          }
        })
        .filter((i) => i)[0];
      this.form.supplementEmptor.buyerTypeStr =
        Obj?.customerTypeCode == 1 ? "个人" : "企业";
      this.form.supplementEmptor.creditCode = Obj?.vendeeCode;
      this.form.supplementEmptor.idCardNo = Obj?.idCard;
      this.form.supplementEmptor.corp = Obj?.vendeeResponsibleName;
      this.form.supplementEmptor.contactAddr = Obj?.vendeeAddress;
      this.form.supplementEmptor.contactPerson = Obj?.vendeePerson;
      this.form.supplementEmptor.contactMobile = Obj?.vendeePhone;
      this.form.supplementEmptor.email = Obj?.vendeeMail;
      this.form.supplementEmptor.fax = Obj?.vendeeFax;
      this.form.supplementEmptor.accessory = Obj?.annexOss;
    },
    async customerCorrelationVendee() {
      let data = {};
      try {
        let res = await customerCorrelationVendee(data);
        console.log(res, "[][][]");
        this.vendeeList = res.data;
      } catch (error) { }
    },
    valid() {
      return new Promise(async (resolve) => {
        let result = true;
        let refs = Object.values(this.$refs);
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index];
          if (Object.prototype.toString.call(ref) == "[object Array]") {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i];
              if (element?.valid) {
                let rc = await element?.valid?.();
                result = result && rc;
              }
              if (element?.validate) {
                let rf = await this._valid(ref);
                result = result && rf;
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, "form_validate");
                result = result && rf;
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.();
              result = result && rc;
            }
            if (ref?.validate) {
              let rf = await this._valid(ref);
              result = result && rf;
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, "form_validate");
              result = result && rf;
            }
          }
        }
        resolve(result);
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
  }
}
.app-container {
  background-color: #fff;
}
</style>
